<template>
    <div class="loginContent">
        <a-card size="medium" :loading="loading">
            <h3 class="title">系统登录</h3>
            <a-form ref="formRef" :model="form" :style="{}"
                    :label-col-props="{span:0,offset:0}"
                    :wrapper-col-props="{span:100,offset:0}"
                    @submit="handleSubmit">
                <a-form-item field="username"
                             :rules="[{required:true,message:'用户名必填'},{minLength:4,message:'至少4个字符'}]"
                             :validate-trigger="['change','input']"
                >
                    <a-input size="large" v-model="form.username" placeholder="请输入用户名"/>
                </a-form-item>
                <a-form-item field="password"
                             :rules="[{required:true,message:'密码必填'}]"
                             :validate-trigger="['change','input']"
                >
                    <a-input-password size="large" v-model="form.password" placeholder="请输入密码"/>
                </a-form-item>
                <a-form-item field="code">
                    <a-row class="grid-demo" :gutter="16">
                        <a-col :span="16">
                            <a-input size="large" v-model="form.code" placeholder="点击图片更换验证码"/>
                        </a-col>
                        <a-col :span="8">
                            <a-image @click="updateCaptcha" :src="captchaUrl" width="100" height="40"
                                     :preview="false"></a-image>
                        </a-col>
                    </a-row>
                </a-form-item>
                <a-form-item>
                    <a-button type="primary" html-type="submit" long>提交</a-button>
                </a-form-item>
            </a-form>
        </a-card>
    </div>
</template>

<script>

    export default {
        name: "Login",
        data() {
            return {
                loading: false,
                captchaUrl: this.requestUrl.captcha.url + '?time=' + new Date(),
                form: {
                    username: 'admin',
                    password: 'abc',
                    code: ''
                }
            }
        },
        methods: {
            updateCaptcha() {
                this.captchaUrl = this.requestUrl.captcha.url + '?time=' + new Date()
            },
            handleSubmit({values, errors}) {
                if (!errors) {
                    //loading开启后就不要关了,否则跳转页面时会先loading结束显示登录框再跳转,不好看
                    this.loading = true
                    this.$post(this.requestUrl.doLogin.url, this.form).then(res => {
                        if (res) {
                            const token = res.obj.tokenHead + ' ' + res.obj.token
                            //存储用户token
                            window.localStorage.setItem("token", token)
                            //跳转首页
                            // this.$router.replace('/home')
                            //如果有直接想去的地址
                            let path = this.$route.query.redirect
                            this.$router.replace((path === '/' || path === undefined) ? '/home' : path)
                        } else {
                            this.loading = false
                        }
                    })
                }
            },
        }
    }
</script>

<style scoped>
    .loginContent {
        margin: 180px auto;
        width: 360px;
        padding: 15px 35px 15px 35px;
    }

    .loginContent .title {
        text-align: center;
    }
</style>
